<template>
  <el-dialog
    title="商品选择"
    :close-on-click-modal="false"
    :visible="true"
    size="small"
    width="80%"
    :before-close="handleClose"
    append-to-body
  >
    <!--工具栏-->
    <div class="head-container">
      <!-- 搜索 -->
      <el-input v-model="query.value" clearable placeholder="输入搜索内容" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
      </el-select>
      <!-- <treeselect v-model="query.cateId" :options="cates" style="width: 320px;font-size:13px;" placeholder="选择商品分类" /> -->

      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-refresh-left" @click="resetQuery">重置</el-button>

    </div>
    <!--表格渲染-->
    <div style="display:flex">
      <div style="width:200px;border: 1px solid #ddd">
        <el-tree
          :data="cates"
          node-key="id"
          @node-click="handleNodeClick"
        />
      </div>
      <div style="flex:1;border: 1px solid #ddd;border-left: 0">
        <el-table v-loading="loading" :data="data" size="small" style="width: 100%;" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="商品ID" />
          <el-table-column ref="table" prop="image" label="商品图片">
            <template slot-scope="scope">
              <a :href="scope.row.image" style="color: #42b983" target="_blank"><img :src="scope.row.image" alt="点击打开" class="el-avatar"></a>
            </template>
          </el-table-column>
          <el-table-column prop="storeName" label="商品名称" />
          <el-table-column prop="cateName" label="分类名称" />
          <el-table-column prop="price" label="商品价格" />
          <el-table-column prop="sales" label="销量" />
          <el-table-column prop="stock" label="库存" />

          <!-- <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <div>
                <el-tag v-if="scope.row.isShow === 1" style="cursor: pointer" :type="''">已上架</el-tag>
                <el-tag v-else style="cursor: pointer" :type=" 'info' ">已下架</el-tag>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    </div>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"
    />

    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="confirmGoods">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import areaTreeData from '@/utils/china-area-tree'
import checkPermission from '@/utils/permission'
import initData from '@/mixins/crud'
import { getCates } from '@/api/yxStoreCategory'

export default {
  components: { },
  mixins: [initData],
  props: {
    isSigle: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      delLoading: false,
      visible: false,
      queryTypeOptions: [
        { key: 'storeName', display_name: '商品名称' }
      ],
      isAttr: false,
      selectGodos: [],
      cates: []
    }
  },
  created() {
    console.log('chinaAreaData===>', areaTreeData())
    this.$nextTick(() => {
      this.init()
      this.getCates()
    })
  },
  methods: {
    checkPermission,
    resetQuery() {
      this.query = {}
      this.toQuery()
    },
    handleNodeClick(node) {
      this.query.cateIds = []
      if (node) {
        this.query.cateIds.push(node.id)
        if (node.children) {
          this.getChildrenId(node.children)
        }
        console.log('handleNodeClick===>', this.query)
      }
      // this.query.cateId = node.id
      this.toQuery()
    },
    getChildrenId(children) {
      children.forEach(node => {
        this.query.cateIds.push(node.id)
        if (node.children) {
          this.getChildrenId(node.children)
        }
      })
    },
    getCates() {
      getCates({ enabled: true }).then(res => {
        this.cates = res.content
      })
    },
    handleClose() {
      this.$emit('handleclose')
    },
    handleSelectionChange(val) {
      this.selectGodos = val
    },
    confirmGoods() {
      if (this.isSigle && this.selectGodos.length > 1) {
        this.$message({
          message: '只能选择一个商品',
          type: 'error',
          duration: 1000,
          onClose: () => {
            // this.init()
          }
        })
      } else {
        this.$emit('confirmGoods', this.selectGodos)
      }
    },
    beforeInit() {
      this.url = 'api/yxStoreProduct'
      const sort = 'id,desc'
      this.params = { page: this.page, size: this.size, sort: sort, isShow: 1, isDel: 0 }
      const query = this.query
      const type = query.type
      const value = query.value
      if (type && value) { this.params[type] = value }
      return true
    }
  }
}
</script>

<style scoped>
.head-container{
  display: flex;
}
.filter-item{
  margin-left: 2px;
}
</style>
